<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content">
    <style>
        .modal-dialog {
            width: 1000px !important;
            height: 1000px !important;
        }
    </style>
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">主页</a>
                </li>
                <li class="active">系统报告</li>
            </ul>
        </div>

        <div class="search_condition_block">
            <div style="margin-top: 5px">
                <label style="width: 80px;margin-left: 15px">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</label>
                <div id="reportCategory" class="btn-group btn-group-sm" role="group" aria-label="...">
                    <button type="button" class="btn btn-success active"  onclick="search('dataTable')">全部</button>
                    <button type="button" class="btn btn-success"  name="Q_EQ_reportCategory" value="1" onclick="search('dataTable')">月报</button>
                    <button type="button" class="btn btn-success"  name="Q_EQ_reportCategory" value="2" onclick="search('dataTable')">年报</button>
                </div>
            </div>
        </div>

        <div class="main-body">
            <table id="dataTable" data-url="/report/report_data" data-page-list=[] data-striped="true"
                   data-pagination="true" data-page-size="15" data-cache="false">
            </table>
        </div>

        <style>
            .btn-group-sm .active {
                background-color: #006dcc !important;
                border-color: #006dcc !important;
            }
        </style>
        <script>

            $('#reportCategory button').unbind("click").bind("click",function (e) {
                $(this).addClass('active').siblings().removeClass('active')
                console.log( $(this) )
            });

            //table字段
            var dataFormat = [{
                title: '序号',
                align: 'center',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'name',
                title: '名称',
                align: 'center'
            }, {
                field: 'reportCategory',
                title: '分类',
                align: 'center',
                formatter: function (value, row, index) {
                    if (value == 1) {
                        return '<p style="color: #00BE67">月报</p>';
                    }
                    if (value == 2) {
                        return '<p style="color: #006dcc">年报</p>';
                    }
                }
            }, {
                field: 'createTime',
                title: '生成时间',
                align: 'center',
                formatter: function (value, row, index) {
                    return formatTimeStrap(value);
                }
            }, {
                field: 'reportCategory',
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    if (value == 1) {
                        var html = '<a onclick="showDetailMonth();">查看详情</a>';
                        return [html].join('');
                    }
                    if (value == 2) {
                        var html = '<a onclick="showDetailYear();">查看详情</a>';
                        return [html].join('');
                    }

                }
            }];

            //初始化table
            window.onload = function () {
                getTable(dataFormat, "dataTable");

            };

            function showDetailMonth(id) {

                var url = "/report/report_detail";

                if (id != null) {
                    url += "?id=" + id;
                }
                $("#modal").modal({
                    remote: url
                });
            }

            function showDetailYear(id) {

                var url = "/report/report_detail_year";

                if (id != null) {
                    url += "?id=" + id;
                }
                $("#modal").modal({
                    remote: url
                });
            }

            /***********************************筛选****************************/
            function getTable(dataFormat, id) {
                $("#" + id).bootstrapTable({
                    method: "get",
                    sidePagination: "server",
                    dataType: "json",
                    queryParams: function queryParams(params) {
                        var param = {
                            pageNum: params.offset / params.limit
                        };
                        var button = $("#reportCategory button.active");
                       // console.log(button[0])
                        var key = button.attr("name")
                        var val = button.val();
                        param[key] = val;

                        return param;
                    },
                    columns:dataFormat
                });

            }
            function search(id) {
                $("#" + id).bootstrapTable("selectPage", 1);
            }
        </script>
    </div>
</div>
</body>
</html>